<template>
 <el-container style="height:100%">
  <el-aside width="auto">
    <common-aside-vue></common-aside-vue>
  </el-aside>
  <el-container>
    <el-header>
   <common-header-vue></common-header-vue>
    </el-header>
    <common-tag></common-tag>
    <el-main>
       <router-view></router-view>    
       <!-- view下面的各个组件展示的地方 -->
    </el-main>
  </el-container>
</el-container>
</template>

<script>
//这里引用了三个公共组件 他们共同构成了界面的ui 
//这里就是顶部 侧边 中间区域的几个组件
import CommonAsideVue from '../components/CommonAside.vue'//侧边栏
import commonHeaderVue from '../components/commonHeader.vue'//顶部区域
import CommonTag from '../components/CommonTag.vue'//面包屑导航
export default {
  name:'Home',
  components:{
    CommonAsideVue,
    commonHeaderVue,
    CommonTag
},
  data() {
    return {
        
    }
  },
}
</script>

<style lang="less" scoped>
.el-header
{
  background-color: #333;
}
.el-main
{
  padding-top: 0;
}
</style>